<template>
<div class="alreadypaid">
	<el-form :model="searchData" class="searchForm">
		<el-form-item>
		  <el-input class="seech1" v-model="searchData.keyword" placeholder="输入停车场查询规则"></el-input>
		</el-form-item>
    <el-form-item style="width: 80px;">
      <el-button type="primary" @click="getTableData()">搜索</el-button>
    </el-form-item>

    <el-form-item style="width: 100px;">
      <el-button type="success" @click="addShow = true">新增规则</el-button>
    </el-form-item>
	</el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="ruleName" label="规则名称" align="center">
    </el-table-column>
    <el-table-column prop="parkCount" label="适用停车场数量" align="center">
    </el-table-column>
    <el-table-column prop="rule" label="规则内容" align="center">
      <template slot-scope="scope">
        <el-popover trigger="hover">
          <span slot="reference" class="seeRule">鼠标移入查看</span>
          <span v-html="scope.row.rule"></span>
        </el-popover>
      </template>
    </el-table-column>
     <!-- <el-table-column prop="payCount" label="充值人次" align="center">
    </el-table-column>
    <el-table-column prop="payAmount" label="充值总金额(元)" align="center">
    </el-table-column> -->
     <el-table-column prop="remark" label="备注" align="center">
    </el-table-column>
    <el-table-column prop="status" label="状态" align="center">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.status"
          active-color="#46a6ff"
          inactive-color="#ccc"
          @change="switchStatus(scope.row)">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button type="warning" size="mini" @click="upDataShow = true; id = scope.row.id">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination :hide-on-single-page="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.pageNum" :page-sizes="[10, 15, 20, 30]" :page-size="10" background layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" style="margin-top:30px;">
  </el-pagination>

  <el-dialog title="新增时长服务规则" :visible.sync="addShow" width="720px">
    <AddRule v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData()"/>
  </el-dialog>

  <el-dialog title="修改时长服务规则" :visible.sync="upDataShow" width="720px">
    <UpdataRule v-if="upDataShow" @closeDialog="upDataShow = false" :id="id" @refresh="getTableData()"/>
  </el-dialog>
</div>
</template>

<script>
  import AddRule from './components/addRule.vue'
  import UpdataRule from './components/updataRule.vue'

export default{
	name:'alreadypaid',
  components: {
    AddRule,
    UpdataRule
  },
  filters:{
    // filterRule(e) {
    //   console.log(e)
    //   var ss = e.replaceAll("|", "\n");
    //   return ss
    // }
  },
	data(){
		return{
        tableData: [],
        addShow: false,
        upDataShow: false,
        searchData: {
          pageSize: 10,
          pageNum: 1
        },
        total:null,
			}
	},
  mounted(){
    this.getTableData();
  },
	methods:{
    getTableData() {
      this.$axios({
        method: 'get',
        url: '/promotion/duration-rule/getDurationRulePage',
        params: this.searchData
      }).then((res) => {
        res.data.records.forEach((item)=>{
          item.status = item.status == 'OPEN' ? true : false
          item.rule = item.rule.replaceAll("|", "<br>")
        })
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },

    switchStatus(e) {
      let status = e.status == true ? 'OPEN' : 'CLOSE';
      this.$axios({
        method: 'post',
        url: '/promotion/duration-rule/switchStatus',
        data: this.$qs.stringify({id : e.id, status: status})
      }).then((res) => {
        if(res.code == 200) {
          this.$message.success('规则状态修改成功！')
        } else {
          this.$message.warning('规则状态修改失败！')
        }
      })
    },


    //分页修改每页显示条数
    handleSizeChange(val){
      this.searchData.pageSize = val;
      this.getTableData();
    },
    //分页跳转页面
    handleCurrentChange(val){
      this.searchData.pageNum = val;
      this.getTableData();
    },
      // handleClose(done) {
      //   this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {});
      // },
	}
}
</script>

<style scoped>
 .searchForm .el-form-item {
 	width: 180px;
 	display: inline-block;
 }
 .seech1 {
  width: 160px;
 }
 .seeRule {
   color: #09CCDE;
 }
 .seeRule:hover {
   cursor: pointer;
 }

</style>
